<template>
    <view class="app-order">
        <view :style="barStyle">
            <view :class="data.mode == 1 ? 'order-bar' : ''" class="dir-top-nowrap main-center cross-center" style="height: 100%;" :style="{'background-color': data.mode == 1 ? data.card_color : ''}">
                <view class="order-title main-between cross-center">
                    <view :style="titleStyle">我的订单</view>
                    <view @click="router('/pages/order/index/index')" class="dir-left-nowrap cross-center">
                        <view>查看更多</view>
                        <image :src="userCenterImg.arrow" alt=""></image>
                    </view>
                </view>
                <view :class="data.mode == 2 ? 'order-bar' : ''"  class="order-menu main-center cross-center" :style="{'background-color': data.mode == 2 ? data.card_color : '','margin': data.mode == 2 ? data.card_margin + 'rpx 0' : '','height': data.mode == 2 ? '140rpx' : '120rpx'}">
                    <view @click="router(item.link_url)" class="order-menu-item dir-top-nowrap main-center cross-center" v-for="(item,index) in data.order_bar" :key="index">
                        <image v-if="index == 0" :src="data.pay_icon" alt=""></image>
                        <view v-if="index == 0" :style="iconStyle">待付款</view>
                        <image v-if="index == 1" :src="data.send_icon" alt=""></image>
                        <view v-if="index == 1" :style="iconStyle">待发货</view>
                        <image v-if="index == 2" :src="data.confirm_icon" alt=""></image>
                        <view v-if="index == 2" :style="iconStyle">待收货</view>
                        <image v-if="index == 3" :src="data.sale_icon" alt=""></image>
                        <view v-if="index == 3" :style="iconStyle">已完成</view>
                        <image v-if="index == 4" :src="data.refund_icon" alt=""></image>
                        <view v-if="index == 4" :style="iconStyle">售后</view>
                        <view class="text"
                              :style="{'background-color': theme.background}"
                              v-if="item.num && item.num !== '' && item.num !== null && item.num !== 0 && item.num !== '0'">
                            {{item.num}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapState, mapGetters} from 'vuex';
    export default {
        name: "app-order",
        props: {
            value: Object,
            theme: Object,
            bg: Object
        },
        data() {
            return {
                height: 136,
                data: {}
            }
        },
        computed: {
            ...mapState({
                mall: state => state.mallConfig.mall,
                userCenterImg: state => state.mallConfig.__wxapp_img.user_center,
                is_vip_card_user: function(state) {
                    return state.user.info && state.user.info.is_vip_card_user ? 1 : 0;
                }
            }),
            ...mapGetters({
                userInfo: 'user/info',
            }),
            barStyle() {
                this.height = this.data.mode == 1 ? 200 : this.data.mode == 2 ? 198 : 158;
                this.height += this.data.card_margin*2;
                let style = `margin-top: ${this.data.margin}rpx;`;
                if(this.data.mode != 3) {
                    if(this.data.mode == 2) {
                        style += `padding: 0 20rpx;`
                    }else {
                        style += `padding: ${this.data.card_margin}rpx 20rpx;`
                    }
                }
                if(this.data.bg == 1) {
                    if(this.data.bg_style == 1) {
                        style += `background-color: ${this.data.bg_color};`
                    }else {
                        style += `background-image: url("${this.data.bg_pic}");background-size: 100% 100%;`
                    }
                }
                return style;
            },
            iconStyle() {
                let style = `color: ${this.data.icon_color};font-size: ${this.data.icon_size}rpx;`;
                return style;
            },
            titleStyle() {
                let style = `color: ${this.data.title_color};font-size: ${this.data.title_size}rpx;font-weight: 600;`;
                return style;
            }
        },
        created() {
            this.data = JSON.parse(JSON.stringify(this.value));
        },
        methods: {
            router(url) {
                uni.navigateTo({
                    url: url
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .app-order {
        .order-line {
            width: 2rpx;
            height: 56rpx;
            opacity: 0.5;
        }
        .order-bar {
            border-radius: 16rpx;
            box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
        }
        .order-bar-item {
            display: flex;
            flex-shrink: 1;
            flex-grow: 1;
        }
        .order-box-info {
            height: 36rpx;
            margin-top: 10rpx;
            .style-2 {
                margin-top: 0;
                margin-right: 24rpx;
            }
            image {
                margin-right: 10rpx;
                display: block;
            }
        }
        .order-title {
            width: 100%;
            padding: 0 24rpx;
            height: 76rpx;
            color: #999;
            font-size: 24rpx;
            image {
                width: 16rpx;
                height: 24rpx;
                margin-left: 8rpx;
            }
        }
        .order-menu {
            width: 100%;
            padding: 0 20rpx;
            .order-menu-item {
                width: 25%;
                height: 120rpx;
                position: relative;
                .text {
                    position: absolute;
                    top: 0;
                    right: #{24rpx};
                    border-radius: #{1000rpx};
                    font-size: $uni-font-size-weak-two;
                    height: #{32rpx};
                    line-height: #{32rpx};
                    min-width: #{32rpx};
                    text-align: center;
                    padding: 0 #{8rpx};
                    z-index: 10;
                    color: #ffffff;
                }
                image {
                    width: 52rpx;
                    height: 52rpx;
                    margin-bottom: 5rpx;
                }
            }
        }
    }
</style>